<template>
    <div class="loading-inline" :class="{active:loading}" :style="{fontSize:fontSize}">
        <em></em>
        <span v-text="title" v-if="title"></span>
    </div>
</template>
<script>
export default {
    name: "Loading",
    props: {
        title: { type: String, default: '' },
        size: { type: [Number, String], default: '' },
        loading: { type: Boolean, default: true },
    },
    computed: {
        fontSize () {
            if (!this.size) {
                return undefined
            } else if (this.size == 'small') {
                return '5px'
            } else if (this.size == 'later') {
                return '16px'
            } else if (this.size == 'medium') {
                return '10px'
            } else {
                return this.size
            }
        }
    },
    methods: {},
};
</script>
<style scoped lang="scss">
@-webkit-keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}
@keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

.loading-inline {
    position: absolute;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    font-size: 8px;

    em {
        &,
        &:before,
        &:after {
            border-radius: 50%;
            width: 2.5em;
            height: 2.5em;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation: load7 1.8s infinite ease-in-out;
            animation: load7 1.8s infinite ease-in-out;
        }
        & {
            color: #f8cf1e;
            margin: 0 auto;
            position: relative;
            top: -2.5em;
            font-size: inherit;
            text-indent: -9999em;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }
        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 0;
        }
        &:before {
            left: -3em;
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
            color: #ea4c89;
        }
        &:after {
            left: 3em;
            color: #48c4ef;
        }
    }

    span {
        margin-top: 18px;
        font-size: 14px;
        line-height: 16px;
    }

    &.active {
        opacity: 1;
        pointer-events: all;
    }
}
</style>

